<template>
  <div class="myTab" @click="choseTab">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    value: Number || String,
  },
  created() {
         this.$nextTick(()=>{
            //  let list = document.querySelector(".mytab").querySelectorAll(".myTabItem")
            //  list[this.value].className = 'myTabItem active'
              let list = document.querySelector('.myTab').querySelectorAll('.myTabItem')
              list[this.value].className = 'myTabItem active'
        })
  },
  methods: {
    // choseTab(e) {
    //   if (e.target.className.includes("myTabItem")) {
    //     let list = document.querySelector(".mytab").querySelectorAll(".myTabItem");
    //     for (let i = 0; i < list.length; i++) {
    //       list[i].className = "myTabItem";
    //     }
    //     e.target.className = "myTabItem active";
    //   }
    // },
      choseTab(e) {
            if(e.target.className.includes('myTabItem')) {
                let list = document.querySelector('.myTab').querySelectorAll('.myTabItem')
                for(let i = 0; i<list.length; i++) {
                    list[i].className = 'myTabItem'
                }
                e.target.className = 'myTabItem active'
            }
        }
  },
};
</script>
